<template>
  <div>
    <div class="container-types">
      <div class="types-title text-l level-up">
        <i class="fa fa-book"></i><span>在线文档</span>
      </div>
      <card :list="doclist" cname="MDoc"></card>
    </div>
    <div class="container-types">
      <div class="types-title text-l level-up">
        <i class="fa fa-video-camera"></i><span>专家讲堂</span>
      </div>
      <card :list="videolist" cname="MVideo"></card>
    </div>
  </div>
</template>

<script>
import Card from 'components/card'
export default {
  components: {
    Card
  },
  data() {
    return {
      doclist: [
        {
          courseid: "1001",
          lessionName: 'Vim命令初体验',
          imgsrc: 'http://avatar.wpn.itlukai.com/1001.jpg'
        },
        {
          courseid: "1002",
          lessionName: 'node.js 从入门到放弃',
          imgsrc: 'http://avatar.wpn.itlukai.com/1002.jpg'
        }
      ],
      videolist: [
        {
          courseid: "3001",
          lessionName: '微信支付-扫码支付',
          imgsrc: 'http://avatar.wpn.itlukai.com/71cf3bc79f3df8dc688047f1c111728b47102815.jpg'
        }
      ]
    };
  },
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}
</script>

<style @scoped lang="less">
  .container-types {
    position: relative;
    padding: 20px 5px;
    .types-title {
      height: 50px;
      font-size: 25px; 
      span {
        margin-left: 20px;
      }
    }
  }
  
  .container-card {
    border-radius: 6px;
    margin-bottom: 20px;

    a {
      display: block;
    }

    .good-card {
      border: 1px solid #ebeef5 !important;
      .card-img {
        width: 100%;
        display: block;
      }
      .card-desc {
        padding: 10px;
        box-sizing: border-box;
        text-align: left;
      }
    }
  }

  // .button {
  //   padding: 0;
  //   float: right;

  //   a {
  //     background-color: #5cb85c;
  //     color: #fff;
  //     border: 1px solid #4cae4c;
  //     border-radius: 4px;
  //     display: inline-block;
  //     padding: 5px 10px;
  //     font-size: 14px;

  //     &:hover {
  //       background-color: #449d44;
  //       border-color: #398439;
  //     }
  //   }
  // }

</style>